<template>
	<view class="container">
		<hy-nav-bar title="卖手列表" :background="{
			backgroundColor: 'rgba(0,0,0,0)'
		}" :border-bottom="false" :titleColor="'#000'" backIconColor="#000"></hy-nav-bar>
		<!-- <view class="tabs">
			<u-tabs :list="tabs" name="tabName" :is-scroll="false" v-model="currentTab" @change="tabChange"
				inactive-color="#666" active-color="#FF6C18"></u-tabs>
		</view> -->
		<swiper class="swiper" :current="currentTab" @change="swiperChange">
			<swiper-item v-for="(tab, index) in tabs" :key="index">
				<scroll-view scroll-y="true" class="scroll-Y" @scrolltoupper="upper" @scrolltolower="lower"
					@scroll="scroll">
					<view class="list">
						<view class="userBox" v-for="(item, index) in tab.list" :key="index">
							<view class="avatar">
								<u-avatar :src="getImgFullPath(item?.user?.avatar)" size="110" mode="circle"></u-avatar>
								<text class="name">{{ item?.user?.nickname === '未设置昵称' ? item?.user?.username.replace(
									/^(\d{3})\d*(\d{4})$/, '$1****$2') : item?.user?.nickname }}</text>
							</view>
							<view class="content">
								<view class="actions">
									<text class="time">{{ dateFormat(new Date(item?.updateTime * 1000), 'MM-dd') }}</text>
									<view class="btns">
										<u-button type="success" style="margin-right: 20rpx;" ripple plain size="mini"
											@click="addContactor(item?.userId)">
											加好友</u-button>
										<u-button type="success" size="mini" ripple @click="toChat">发消息</u-button>
									</view>
									<!-- <text class="tips">{{ dateFormat(new Date(item?.createTime * 1000),'MM-dd')}} 活跃</text> -->
								</view>
							</view>
						</view>
						<u-empty v-if="!tab.list.length" text="暂无卖手" margin-top="160"></u-empty>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { socialApi } from '@/api';
import { getImgFullPath, dateFormat } from '@/utils';
import { route } from '@/utils/common';
import { useUserStore } from '@/store';

const userStore = useUserStore()
interface ItemOfList {
	user: {
		avatar: string
		nickname: string
		[key: string]: any
	}
	createTime: number
	[key: string]: any
}
interface ITab {
	tabName: string
	key?: string
	value?: string | number
	createTime?: number
	list: ItemOfList[]
	[key: string]: any
}
const tabs = reactive<ITab[]>([
	{
		tabName: '全部',
		list: []
	}
])
const currentTab = ref(0)
const tabChange = (index: number) => {
	currentTab.value = index
}
const swiperChange = (e: any) => {
	currentTab.value = e.detail.current
}
const pagination = reactive({
	pageIndex: 1,
	pageSize: 30,
	finished: false
})
async function getData() {
	let { pageIndex, pageSize, finished } = pagination
	if (finished) return
	uni.showLoading({
		title: '加载中...',
		mask: true
	})
	const { data, current, pages } = await socialApi.getShopUserList({
		pageIndex,
		pageSize
	}).finally(() => {
		uni.hideLoading()
	})
	if (data && data.length) {
		tabs[0].list.push(...data)
	}
	if (currentTab.value !== 0) {
		tabs[currentTab.value].list = dataFilter(tabs[0].list, currentTab.value)
	} else {
		tabs.forEach((tab, index) => {
			tab.list = dataFilter(tabs[0].list, index)
		})
	}
	if (current < pages) {
		pageIndex++
	} else {
		finished = true
	}
}
function dataFilter(data: ItemOfList[], index: number): ItemOfList[] {
	const matcher = tabs[index].matched
	if (!matcher) return data
	const list = data.filter((item) => {
		return matcher.every((m: { [x: string]: any; }) => {
			return Object.keys(m).every((key) => {
				return item[key] === m[key]
			})
		})
	})
	return list
}
function upper() { }
function lower() {
	console.log('lower')
}
function scroll(e: any) {
	const { scrollTop } = e.detail
}
function scrollTop() {

}
function toChat() {
	route({
		url: '/packageD/pages/chat/index',
	})
}
// 加好友
async function addContactor(addUserId: number) {
	uni.showLoading()
	const { data } = await socialApi.addChatFriend(userStore.userInfo.id, addUserId).finally(() => {
		uni.hideLoading()
	})
	uni.showToast({
		title: '添加成功',
		icon: 'success',
	})
}
onLoad(() => {
	getData()
})

</script>

<style lang="scss" scoped>
@import '@/styles/helper.scss';

.container {
	min-height: 100vh;
	background: #fff;

	.tabs {
		position: sticky;
		top: 0;
		// #ifdef H5
		top: calc(44px + env(safe-area-inset-top));
		// #endif
		background: hsl(0, 0%, 100%);
		z-index: 2;
	}

	.swiper {
		height: calc(100vh - 44px);
	}

	.userBox {
		display: flex;
		width: 100%;
		padding: 20rpx;
		box-sizing: border-box;
		background: #fff;

		.avatar {
			display: flex;
			align-items: center;
			justify-content: center;

			.name {
				margin-left: 30rpx;
				font-size: 28rpx;
				max-width: 340rpx;
				@include ellipsis;
			}
		}

		.content {
			flex: 1;
			margin-left: 20rpx;

			.actions {
				display: flex;
				align-items: flex-end;
				flex-direction: column;
				justify-content: flex-end;
				gap: 20rpx;

				.tips {
					color: #999;
				}

				.time {
					color: #999;
					text-align: center;
				}
			}
		}
	}
}
</style>
